import React, {Component} from 'react';

// let arr = [];
class MsgList extends Component {
  // 留言列表 成员数据?  state数据?

  state = {
    msgList: []//应该在哪里push值
  };

  // props发生改变
  //
  // componentDidMount
  // render
  // componentWillReceiveProps
  // shouldComponentUpdate

  //
  // UNSAFE_componentWillReceiveProps() {
  //  this.setState({})// 死循环
  // }

  // showId
  componentDidMount() {
    this.setState({
      msgList: this.props.msgList
    })
  }

  render() {
    let {msgList} = this.state
    return (
      <div>
        <h1>留言列表</h1>
        <button onClick={() => {
          this.props.changeShowId({showId: 1});
        }}>返回留言
        </button>
        {
          msgList.map((item,index) => {
            return (
              <div key={item.data}
                   onClick={() => {
                     //如果操作数组 比如 push splice ...
                     //此时 视图不会更新
                     this.state.msgList.splice(index, 1);
                     //改变state中的值 必须通过 setState 视图才会更新
                     //必须调用一个this.setState({}) 才会更新视图
                     this.setState({})
                   }}
                   style={{border: '1px solid #ccc', margin: '10px'}}>
                <div>{item.username}</div>
                <div>{item.msg}</div>
                <div>{item.data}</div>
              </div>);
          })
        }

      </div>
    );
  }
}

export default MsgList;
